<template>
    <div id="home" class="container-xl bg-white">
        <div class="row">
            <h4 class="col h">{{ user?.name }}的积分</h4>
        </div>
        <div class="row" :style="{ marginBottom: '48px' }">
            <div class="col">
                <el-button-group class="button-group">
                    <el-button :type="type === '比赛' ? 'primary' : 'default'"
                        @click="router.push({ query: { userid: route.query.userid, type: '比赛' } })">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_bisaijifen.png"
                            width="16" alt="">
                        <span class="text">比赛积分</span>
                        <MynumberVue class="num" :num="Number(integral.find(e => e.type === '比赛')?.nums || 0)">
                        </MynumberVue>
                    </el-button>
                    <el-button :type="Array.isArray(type) ? 'primary' : 'default'"
                        @click="router.push({ query: { userid: route.query.userid, type: '贡献' } })">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_gonxianjifen.png"
                            width="16" alt="">
                        <span class="text">贡献积分</span>
                        {{}}
                        <MynumberVue class="num"
                            :num="Number(integral.filter(e => e.type?.includes('贡献')).map(e => Number(e.nums)).reduce((a = 0, b = 0) => a + b, 0) || 0)">
                        </MynumberVue>
                    </el-button>
                    <el-button :type="type === '练习' ? 'primary' : 'default'"
                        @click="router.push({ query: { userid: route.query.userid, type: '练习' } })">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_lianxijifen.png"
                            width="16" alt="">
                        <span class="text">练习积分</span>

                        <MynumberVue class="num" :num="Number(integral.find(e => e.type === '练习')?.nums || 0)">
                        </MynumberVue>
                    </el-button>
                    <el-button :type="type === '金币' ? 'primary' : 'default'"
                        @click="router.push({ query: { userid: route.query.userid, type: '金币' } })">
                        <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_jinbi.png" width="16"
                            alt="">
                        <span class="text">金币</span>

                        <MynumberVue class="num" :num="Number(integral.find(e => e.type === '金币')?.nums || 0)">
                        </MynumberVue>
                    </el-button>
                </el-button-group>
            </div>
        </div>
        <div class="row" v-loading="loading">
            <div class="col" :style="{ padding: '0 24px 0 24px' }">
                <table class="table table-borderless  table-striped">
                    <thead class="border-bottom thead">
                        <tr class>
                            <td width="110" class="m-pl-6 m-border-2">类型</td>
                            <td scope="col">事件</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(v, key) in getquestionbank" :key="key">
                            <td class="m-pl-6 m-border-2">
                                <img v-if="v.type === '金币'" height="14"
                                    src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/icon_jinbi.png" />
                                <svg v-else class="icon" aria-hidden="true">
                                    <use v-if="v.type === '比赛'" height="14" xlink:href="#icon-icon_zuji_canjiabishai" />
                                    <use v-if="v.type?.includes('贡献')" height="14"
                                        xlink:href="#icon-icon_zuji_gongxiantijie" />
                                    <use v-if="v.type === '练习'" height="14" xlink:href="#icon-icon_zuji_canjialianxi" />
                                </svg>
                                <span
                                    v-text="v.type === '金币' ? '金币' : v.type?.includes('贡献') ? '贡献积分' : v.type + '积分'"></span>
                            </td>
                            <td>
                                {{ v.describe }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col text-right">
                <el-pagination :page-size="limit" :total="getquestionbankcount" @current-change="change"
                    layout="prev, pager, next" :current-page="Math.floor(offset / limit) + 1"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { assign } from "underscore";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Iobj, asyncgetintegral, asyncgetuser, asyncselectintegral } from "../../../api/index";
import MynumberVue from "../../../components/animejs/mynumber.vue";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";


const store = useStore(Storekey)
const router = useRouter()
const route = useRoute()
const loading = ref(true)
const getquestionbank = ref<Studycodemodel.Iintegral[]>([])

const getquestionbankcount = ref(0)

const integral = ref<{ nums: number, type: Studycodemodel.Iintegral['type'] }[]>([])

const offset = computed(() => {
    return Number(route.query.offset) || 0
})

const type = computed(() => {
    if (!route.query.type) {
        return ''
    } else if (route.query.type === '贡献') {
        return ['题解贡献', '测试点贡献']
    }
    return route.query.type
})

const limit = computed(() => {
    return Number(route.query.limit) || 50
})


const formInline = reactive<Iobj<Studycodemodel.Iintegral>>({
    userid: route.query.userid,
})

onMounted(() => {
    getintegral()

    start()
})



watch(() => [formInline, type.value, offset.value], () => {

    start()
})


async function getintegral() {
    if (route.query.userid) {
        integral.value = await asyncgetintegral({ userid: Number(route.query.userid) })
    }
}

const user = ref()

async function start() {
    loading.value = true;
    const obj = assign({}, formInline, {
        _limit: limit.value,
        _offset: offset.value,
        type: type.value,
        _order: 'createdAt'
    })
    if (!type.value) {
        delete obj.type
    }
    const { rows, count } = await asyncselectintegral(obj);
    getquestionbank.value = rows
    getquestionbankcount.value = count
    loading.value = false;
    user.value = await asyncgetuser({ ID: route.query.userid })
}

function change(r: number) {
    router.push({
        query: assign({}, route.query, {
            limit: limit.value,
            offset: (r - 1) * limit.value
        }),
    });
}

function _delect() {
    delete formInline.type
}

</script>

<style scoped>
.bg {
    background-color: #f2f2f2;
}

.min-height {
    margin-top: 24px;
    margin-bottom: 48px;
    padding-bottom: 24px;
}

.btn {
    padding: 3px 8px;
    font-size: 12px;
}

tr {
    line-height: 48px;
}

td {
    padding: 0 !important;
}

.button-group button {
    --el-button-border-color: rgba(0, 0, 0, 0.06);
    width: 50%;
}

.button-group .num {
    font-weight: 700;
}

.button-group .text {
    margin-left: 6px;
    margin-right: 6px;
}


.div-success {
    background-color: var(--color-43);
    color: #ffffff;
}

.div-info {
    background-color: #d9d9d9;
    color: #8c8c8c;
}

.div-a1 {
    width: 104px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.h {
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 48px;
    margin-top: 48px;
    padding-left: 48px;
    padding-right: 48px;
}

.m-pl-6 {
    padding-left: 24px !important;
}

.m-pl-6 img {
    margin-right: 6px;
    transform: translateY(-1px);
}

.m-pl-6 .icon {
    margin-right: 6px;
}

.m-pr-6 {
    padding-right: 24px !important;
}

.thead {

    font-weight: 700;
}

.disbutton {
    border: none !important;
    background-color: #f5f5f5 !important;
    --el-button-hover-text-color: #000;
    --el-button-hover-background-color: #f5f5f5;
    height: 28px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 12px;
    padding-right: 12px;
}
</style>
